import React, { Component } from 'react';
import { StyleSheet, PixelRatio, View, Text, Image, Animated, TouchableOpacity, findNodeHandle, UIManager } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { OrderCommon } from '../../_common/common';
import { CURRENCY } from '../../../../utils/helper';
import navigationSeevice from '../../../../components/navigation/navigationSeevice'

const scale = GLOBAL.SCALE;
export class ResourceBaoCpt extends Component {
    constructor(props) {
        super(props);
        let { visible } = props.data || {};
        this.state = {
            visible,
            onoff: false
        }
        this.onOff = true;
    }

    componentDidMount = () => { }

    //跳资源详情
    _goDetail = (paramsData) => {
        navigationSeevice.navigate('TurnOrderInfo', paramsData)
    }

    render() {
        let { itemData, choice } = this.props || {};
        let { bidPackageId, bidId, bizStaffId, companyName, createTime, reportStatusName, resourceBidOrderList, tranReportType, orderType, bidOrderGroupId } = itemData || {};
        let unit = CURRENCY.getUnit(itemData.currency).text;
        let unitSymbol = CURRENCY.getUnit(itemData.currency).label;
        return (
            <View style={[{ paddingBottom: 5 * scale, paddingLeft: 12 * scale, paddingRight: 12 * scale }]}>
                <View style={styles.itemHead}>
                    <View style={{ flexDirection: 'row', flex: 1 }}>
                        <Text numberOfLines={1} style={{ color: '#272727' }}>{companyName}</Text>
                    </View>
                    <Text style={{ color: '#272727', fontSize: 13 * scale, opacity: .6 }}>{createTime}</Text>
                </View>
                <TouchableOpacity activeOpacity={.6} style={styles.listItem} onPress={() => { this._goDetail({ bidId, tranReportType, bizStaffId, choice, orderType, bidOrderGroupId }) }}>
                    <View style={styles.itemHeader}>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={{ color: '#272727', fontSize: 13 * scale }}>资源包 {bidPackageId && bidPackageId.length > 18 ? bidPackageId.substr(0, 18) + '....' : bidPackageId}</Text>
                            {tranReportType == 'Q' ? <Image source={OrderCommon.iconData.quanHuaImg} style={styles.infoItemImg} /> : <Image source={OrderCommon.iconData.openImg} style={styles.infoItemImg} />}
                        </View>
                        <Text style={[{ color: '#FA4516', fontSize: 13 * scale }]}>{reportStatusName}</Text>
                    </View>
                    <View style={[styles.itemBody]}>
                        {
                            resourceBidOrderList && resourceBidOrderList.map((item, index) => {
                                if (index < 2) {
                                    return (
                                        <View style={styles.goodsItem} key={index}>
                                            <View style={{ flexDirection: 'row' }}>
                                                <Text style={styles.goodsItemTitle}>{item.mergeType == 'MD' ? item.contractName : item.goodsName}</Text>
                                                {item.priceType == '2' ? <Text style={[styles.priceType, styles.priceType2]}>暂定价</Text> : <Text style={[styles.priceType, styles.priceType1]}>一口价</Text>}
                                            </View>
                                            <View>
                                                <Text style={styles.goodsItemText}>{item.price} {unit}/吨</Text>
                                                <Text style={styles.goodsItemText2}>{item.quantity} 吨</Text>
                                            </View>
                                        </View>
                                    )
                                }
                            })
                        }
                    </View>
                    <Text style={styles.goodsTotal}>共 {itemData.totalCnt} 件商品</Text>
                    <View style={styles.itemFooter}>
                        <Text style={{ fontSize: 13 * scale, color: '#272727' }}>共：{itemData.totalQuantity}吨 </Text>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={{ fontSize: 13 * scale, color: '#272727' }}>合计：{unitSymbol}{itemData.totalAmt || '--'}{unit}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
            </View >
        )
    }
}

const styles = StyleSheet.create({
    listItem: {
        backgroundColor: '#fff',
        borderRadius: 4 * scale,
        marginBottom: 15 * scale,
        marginTop: 7 * scale,
        paddingLeft: 12 * scale,
        paddingRight: 12 * scale,
        paddingBottom: 12 * scale,
        paddingTop: 12 * scale
    },
    itemHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingBottom: 10 * scale,
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 1 / PixelRatio.get(),
        borderStyle: 'solid',
    },
    itemCommonText: {
        fontSize: 13 * scale,
        color: '#272727',
        paddingBottom: 6 * scale,
        paddingTop: 4 * scale
    },
    itemHead: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    itemFooter: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginTop: 10 * scale,
        paddingTop: 10 * scale,
        borderTopColor: '#e4e4e4',
        borderTopWidth: 1 / PixelRatio.get(),
        borderStyle: 'solid',
    },
    itemBody: {
        position: 'relative',
        overflow: 'hidden',
        maxHeight: 110 * scale
    },
    goodsItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 15 * scale,
        height: 40 * scale
    },
    goodsItemTitle: {
        fontSize: 14 * scale,
        fontWeight: 'bold'
    },
    goodsItemText: {
        fontSize: 13 * scale,
        color: '#333',
        textAlign: 'right',
        lineHeight: 20 * scale
    },
    goodsItemText2: {
        fontSize: 13 * scale,
        color: '#666',
        textAlign: 'right',
        lineHeight: 20 * scale
    },
    goodsTotal: {
        textAlign: 'center',
        opacity: .8
    },
    infoItemImg: {
        marginLeft: 5 * scale
    },
    imgBox: {
        flexDirection: 'row',
        justifyContent: 'center',
    },
    downImg: {
        width: 12 * scale,
        height: 12 * scale,
        padding: 10 * scale
    },
    priceType: {
        marginLeft: 5 * scale,
        fontSize: 11 * scale,
        width: 40 * scale,
        height: 18 * scale,
        lineHeight: 18 * scale,
        textAlign: 'center'
    },
    priceType2: { color: '#FA6400', backgroundColor: '#FBEFE8' },
    priceType1: { color: '#85C0EC', backgroundColor: '#ECF7FF' }

})